<template>
    <div class="addSite">
        <div class="addSiteBox"></div>
      <miao-header backBtn="true">
        <span slot="header">新建联系人</span>
      </miao-header>
      <app-loading :isHidLoading="isHidLoading"></app-loading>
      <ul class="addSite-message">
        <li>
          <span>收货人：</span>
          <input type="text" v-model.trim="userName">
        </li>
        <li>
          <span>联系方式：</span>
          <input type="text" v-model.trim="userTel">
        </li>
        <li class="addSite-li">
          <span>所在地区：</span>
          <input type="text" @click="visibleLocFn" v-model.trim="locationDate">
          <img src="../assets/dot.png"
               alt="" class="addSite-li-img"
               @click="visibleLocFn">
        </li>
        <li class="addSite-message-li">
          <span>详细地址：</span>
          <input class="detailedAddress"
                 placeholder="街道，楼牌号等"
                 v-model.trim="detailedAddress">
        </li>
      </ul>
      <div class="add-save" @click="addSave">
        <span>保存</span>
      </div>
      <!--弹框-->
      <message :theme=messageTheme :message.sync="messageShow" >
        <span>{{messageTitle}}^_^</span>
      </message>
        <my-location :visible.sync="visibleLoc"></my-location>

    </div>
</template>

<script>
  const myLocation = r => require.ensure([], () => r(require('@/global/myLocation/myLocation.vue')), 'myLocation');
    export default {
        name: "addSite",
        data(){
          return{
            visibleLoc:false,
            locationDate:'',
            userName:'',
            userTel:'',
            detailedAddress:'',
            addSite:{},
            messageShow:false,
            messageTitle:'',
            receiver:null,
            isHidLoading:false,
            messageTheme:0
          }
        },
      components:{
        myLocation
      },
      mounted(){
          this.$bus.$on('location',(val)=>{
            val&&(this.receiver = val);
            this.locationDate = val.toString().split(',').join(' ')
          })
      },
      methods:{
        visibleLocFn(){
          document.activeElement.blur();
          this.visibleLoc=true;
          this.$bus.$emit('locationshow',this.visibleLoc)
        },
        addSave(){
          if(!this.userName){
            this.timeTitle('请输入收货人');
            return;
          }
          if(!/^1[35789][0-9]{9}/.test(this.userTel)){
            this.timeTitle('请输入合法手机号码');
            return;
          }
          if(!this.locationDate){
            this.timeTitle('请选择所在地');
            return;
          }
          if(!this.detailedAddress){
            this.timeTitle('请输入详细地址');
            return;
          }
          this.isHidLoading = true;
          this.addSite={locUser : this.userName, locTel : this.userTel, locCity : this.locationDate, locSite : this.detailedAddress};
          //保存地址
          this.$http.put('/api/addr',{
            receiver:this.userName,
            province:this.receiver[0],
            city:this.receiver[1],
            district:this.receiver[2],
            details:this.detailedAddress,
            telNumber:this.userTel,
          }).then(val=>{
            val.data.code!==1&&this.timeTitle(val.data.msg);
            if(val.data.code===1){
              this.isHidLoading = false;
              this.$router.push({name:'myAddress',params:{'addSite':this.addSite}});
            }
          });

        },
        timeTitle(str){
          this.messageShow = true;
          this.messageTitle = str;
        }

      }
    }
</script>

<style scoped>
  .addSite{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    color: RGB(46,46,46);
  }
  .addSiteBox{
    height: 100px;
  }
  .addSite-message{
    list-style: none;
    padding-left: 20px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .addSite-message>li{
    height: 106px;
    border-bottom: 1px solid #eee;
    font-size: 0;
    line-height: 106px;
  }
  .addSite-message>li>span{
    font-size: 34px;
  }
  input{
    user-select: text;
    caret-color: #868686;
    border: none;
    outline: none;
    height: 90%;
    width: 70%;
    font-size: 32px;
  }
  input::placeholder {
    color: #bfbfbf;
    font-weight: bold;
    font-size: 32px;
  }
  .addSite-message>li>.detailedAddress{
    vertical-align: top;
    border: none;
    height: 110px;
    outline: none;
  }
  .addSite-message>.addSite-message-li {
    height: 175px;
  }
  .addSite-li>input{
    width: 60%;
  }
  .addSite-li-img{
    float: right;
    width: 40px;
    margin-top: 35px;
    margin-right: 18px;
  }
  .add-save{
    height: 80px;
    width: 100vw;
    margin-top: 240px;
    text-align: center;
    line-height: 80px;
  }
  .add-save>span{
    display: inline-block;
    color: white;
    font-size: 38px;
    width: 70%;
    height: 100%;
    border-radius: 40px;
    background: linear-gradient(to left,#31e07c,#1cd245);
  }
</style>
